import { defineComponent } from 'vue';
export const CustomInput = defineComponent({
    name: 'CustomInput',
    template: `<el-input v-model="input" :placeholder="config.placeholder" clearable   maxlength="50"
    show-word-limit></el-input>`,
    props: {
        config: Object,
        value: {type: String, default: ''},
    },
    computed: {
        input: {
            get():String| Number {
                return this.value;
            },
            set(val: String | Number) {
                this.$emit('update:value', val);
            },
        },
    },
});
export const CustomSelect = defineComponent({
    name: 'CustomSelect',
    template: `
        <el-select v-model="input" :placeholder="config.placeholder" clearable>
            <el-option v-for="(item, index) of config.options" :key="index" :label="item" :value="item"></el-option>
        </el-select>`,
    computed: {
        input: {
            get(): String | Number {
                return this.value;
            },
            set(val: String | Number) {
                this.$emit('update:value', val);
            },
        },
    },
    props: {
        config: Object,
        value: {
            type: [String, Number],
            default: ''
        },
    },
});
export const CustomDate = defineComponent({
    name: 'CustomDate',
    props: {
        config: Object,
        value: {
            type: [String, Number],
            default: ''
        },
    },
    template: `
    <el-date-picker v-model="input" type="date" :placeholder="config.placeholder" value-format="YYYY-MM-DD" clearable></el-date-picker>
    `,
    computed: {
        input: {
            get():String | Number {
                return this.value || '';
            },
            set(val:String | Number) {
                this.$emit('update:value', val);
            },
        },
    },
});
export const CustomCheckbox = defineComponent({
    name: 'CustomCheckbox',
    props: {
        config: {
            type: Object,
            default: {}
        },
        value: Array,
    },
    template: `
    <el-checkbox-group v-model="list" @change="listChange">
        <el-checkbox v-for="(item, index) of config.options" :label="item"></el-checkbox>
    </el-checkbox-group>
    <el-checkbox v-if="config.hasExtra" v-model="showExtra">
        <span>其他<el-input @input="inputChange" v-if="showExtra" v-model="extra" size="mini" class="checkbox-extra-input" style="margin-left: 8px;"></el-input></span>
    </el-checkbox>
    `,
    data() {
        return {
            extra: '',
            showExtra: false,
            list: [],
        };
    },
    methods: {
        inputChange(val:String) {
            let value:Array<any> = [];
            if (val) {
                value = [...this.list, val];
            } else {
                value = this.list;
            }
            this.$emit('update:value', value);
        },
        listChange() {
            let value:Array<any>  = [];
            if (this.config.hasExtra && this.showExtra && this.extra) {
                value = [...this.list, this.extra];
            } else {
                value = this.list;
            }
            this.$emit('update:value', value);
        },
    },
});
export const CustomUpload = defineComponent({
    name: 'CustomUpload',
    props: {
        config: Object,
        value: Array,
    },
    template: `
    <el-upload
  action="#"
  :on-remove="onRemove"
  :before-upload="beforeUpload"
  :http-request="() => {}"
  :file-list="fileList"
  multiple
>
    <el-button type="primary" size="small" style="margin-right:10px"><svg-icon name="upload" style="width: 16px;height: 13px;"></svg-icon
    ><span style="margin-left: 4px">上传附件</span></el-button><span style="font-size: 13px;color:#979DA3;">上传附件，单个文件最大20M</span>
</el-upload>
    `,
    methods: {
        beforeUpload(file:File) {
            if (file.size / 1024 / 1024 > 20) {
                this.$message.info('文件大小超出限制');
                return false;
            }
            this.fileList = this.fileList.filter(
                (item) => item.status === 'success'
            );
            this.fileList.push({
                name: file.name,
                percentage: 100,
                raw: file,
                size: file.size,
                status: 'success',
                uid: file.uid,
            });
            this.$emit(
                'update:value',
                this.fileList.map((item) => item.raw)
            );
        },
        onRemove(file, fileList) {
            this.fileList = fileList;
            this.$emit(
                'update:value',
                fileList.map((item) => item.raw)
            );
        },
    },
    data() {
        return {
            fileList: [],
        };
    },
});
